<script setup lang="ts">
import type { DeviceProperty, ThingModel } from '#/api/iot/device/manage/model';

import { h, onMounted, ref } from 'vue';

import { useVbenDrawer } from '@vben/common-ui';

import { HistoryOutlined } from '@ant-design/icons-vue';
import { Button, Card, Empty, InputSearch, Space, Tag } from 'ant-design-vue';

import { deviceLatest, thingModelSelect } from '#/api/iot/device/manage';

import HistoryData from './historyData/historyData.vue';

const props = defineProps(['device']);

const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;

const searchModel = ref<string>('');

const thingModelList = ref<ThingModel[]>([]);

const activeIndex = ref<number>(0);

const devicePropertyList = ref<DeviceProperty[]>([]);

const [HistoryDrawer, historyApi] = useVbenDrawer({
  connectedComponent: HistoryData,
});

const historyHandler = (item: DeviceProperty) => {
  historyApi.open();
  historyApi.setData({
    deviceId: props.device.id,
    itemId: item.itemId,
  });
};

const onSearch = (val: string) => {
  getThingModelList(val);
};

const handleListItem = (index: number) => {
  activeIndex.value = index;
  thingModelList.value[index] &&
    getDeviceProperty(thingModelList.value[index].id);
};

const getDeviceProperty = (blockId: string) => {
  deviceLatest({
    deviceId: props.device.id,
    blockId,
  }).then((res: DeviceProperty[]) => {
    console.log(res);
    devicePropertyList.value = res;
  });
};

/**
 * 获取模型左侧列表
 * @param blockName 根据名称搜索
 */
const getThingModelList = (blockName?: string) => {
  thingModelSelect({
    productId: props.device.productId,
    blockName,
  }).then((res: ThingModel[]) => {
    thingModelList.value = res;
    handleListItem(0);
  });
};

onMounted(() => {
  getThingModelList();
});
</script>

<template>
  <div class="dataReporting flex w-full">
    <div class="model mr-2">
      <InputSearch
        v-model:value="searchModel"
        placeholder="请输入模块名称"
        @search="onSearch"
      />
      <div class="mt-2">
        <div
          v-for="(item, index) in thingModelList"
          :key="item.id"
          class="itemBlock flex cursor-pointer flex-col"
          :class="[index === activeIndex ? 'active' : '']"
          @click="handleListItem(index)"
        >
          <span class="blockName">
            {{ item.blockName }}
          </span>
          <span class="blockIdentifier">
            {{ item.blockIdentifier }}
          </span>
        </div>
      </div>
    </div>
    <div class="cards flex-1">
      <Empty v-if="devicePropertyList.length === 0" :image="simpleImage" />
      <Space class="flex flex-row flex-wrap">
        <Card
          class="w-full"
          v-for="(item, index) in devicePropertyList"
          :key="index"
        >
          <div class="text-lg font-bold">{{ item.name }}</div>
          <div class="mt-2">
            属性标识符号: <Tag color="processing">{{ item.identifier }}</Tag>
          </div>
          <div>数据类型: {{ item.dataType || '-' }}</div>
          <div>数据单位: {{ item.unit || '-' }}</div>
          <div>属性最新值: {{ item.value || '-' }}</div>
          <div class="flex justify-end">
            <Button
              type="link"
              :icon="h(HistoryOutlined)"
              @click="historyHandler(item)"
            >
              历史数据
            </Button>
          </div>
        </Card>
      </Space>
    </div>
    <HistoryDrawer />
  </div>
</template>
<style lang="scss" scoped>
.dataReporting {
  .model {
    width: 17%;
  }

  .cards {
    width: 83%;

    :deep(.ant-space-item) {
      width: 25%;
    }
  }

  .active {
    background: hsl(var(--accent)) !important;

    &::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 4px;
      content: '';
      background: hsl(var(--primary));
    }
  }

  .itemBlock {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.2s ease;

    &:hover {
      background: hsl(var(--accent)) !important;

      &::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 4px;
        content: '';
        background: hsl(var(--primary));
      }
    }

    .blockIdentifier {
      color: #666;
      word-break: break-all;
    }

    .blockName {
      font-size: 16px;
      color: #333;
      word-break: break-all;
    }
  }
}
</style>
